<template>
  <div class="healthFitness">
    <mains :title="'健康百科'">
      <template v-slot:btn>
        <div style="width: 20%; display: flex; justify-content: space-around; align-items: center;">
          <Button >删除</Button> 
          <Button type="primary" @click="goModal">新增文章</Button>
            
        </div>
      </template>
    </mains>
      <Card style="width:98%;padding:0 16px 16px; margin: 0 auto;">
      <template #title>
        <Input v-model="formInline.doctorName" placeholder="请输入文章标题" style="width: 300px;margin:0 10px;" />
        <Button type="primary" @click="search">搜索</Button>
      </template>
      <template #default>
        <!-- 添加复选框列并修改插槽语法 -->
        <Table :columns="columns" :data="tableData" :pagination="false" @on-selection-change="handleSelectionChange">
          <template #action="{ row }">
            <Button type="text" icon="md-lightning" size="small"></Button>
            <Button type="text" icon="md-create" size="small"></Button>
          </template>
        </Table>
        <!-- 分页器组件 -->
        <div class="pagination-container">
          <Page 
            :total="pagination.total"
            :current="pagination.current"
            :page-size="pagination.pageSize"
            show-total
            show-sizer
            @on-change="handlePageChange"
            @on-page-size-change="handlePageSizeChange"
          ></Page>
        </div>
      </template>
    </Card>
  </div>
</template>

<script setup>
import mains from '@/components/main.vue'
import { ref, reactive, onMounted} from 'vue';
import router from '@/router';
// 跳转模态框
const goModal = () => {
  router.push({ path: '/home/hospitalNavigationModal' });
};
// 表单数据
const formInline = reactive({
  department: '',
  doctorName: ''
});

// 科室列表
const cityList = ref([
  { value: '', label: '全部' },
  { value: '内科', label: '内科' },
  { value: '外科', label: '外科' },
  { value: '神经内科', label: '神经内科' }
]);

// 表格配置 - 添加了复选框列
const columns = ref([
  {
    type: 'selection',  // 添加复选框列
    align: 'center'
  },
  {
    title: '文章标题',
    key: 'doctorName',
  },
  {
    title: '缩略图',
    key: 'avatar',
  },

  {
    title: '作者',
    key: 'title',
  },
  {
    title: '操作时间',
    key: 'department',
  },
 
  
  {
    title: '操作',
    key: 'action',
    slot: 'action'
  }
]);

// 表格数据
const tableData = ref([]);

// 选中的行数据
const selectedRows = ref([]);

// 分页配置 - 调整了分页属性名称以匹配View UI Plus
const pagination = ref({
  total: 0,        // 总记录数
  current: 1,      // 当前页码
  pageSize: 10,    // 每页显示条数
  pageSizes: [10, 20, 30, 50]  // 可选的每页显示条数
});

// 搜索方法
const search = () => {
  console.log('搜索条件:', formInline);
  // 模拟API请求 - 添加了分页参数
  loadData(pagination.value.current, pagination.value.pageSize);
};

// 加载数据方法
const loadData = (pageNum, pageSize) => {
  // 模拟API请求
  setTimeout(() => {
    // 生成模拟数据
    const totalCount = 100;
    const startIndex = (pageNum - 1) * pageSize;
    const endIndex = Math.min(startIndex + pageSize, totalCount);
    
    tableData.value = Array.from({ length: endIndex - startIndex }).map((_, index) => ({
      id: startIndex + index + 1,  // 添加唯一ID
      doctorName: `医生${startIndex + index + 1}`,
      avatar: '',
      hospitalArea: '东院',
      title: '',
      department: formInline.department || '内科',
      office: '1号楼三楼301',
      introduction: '2019-09-09 10:09'
    }));
    
    pagination.value.total = totalCount;  // 更新总记录数
  }, 500);
};

// 处理分页变化
const handlePageChange = (pageNum) => {
  pagination.value.current = pageNum;
  loadData(pageNum, pagination.value.pageSize);
};

// 处理每页显示条数变化
const handlePageSizeChange = (pageSize) => {
  pagination.value.pageSize = pageSize;
  pagination.value.current = 1;  // 重置为第一页
  loadData(1, pageSize);
};

// 处理复选框选择变化
const handleSelectionChange = (selection) => {
  selectedRows.value = selection;
  console.log('选中的行:', selectedRows.value);
};

// 页面加载时初始化数据
onMounted(() => {
  search();
});
</script>
